<template>
  <div class="execute-details-dialog">
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" width="850px">
      <div class="title" slot="title">执行记录详情</div>
      <div class="details-body">
        <div class="user-info">
          <div class="line">
            <div class="t1"><span>会员姓名：</span></div>
            <div><el-input disabled v-model="executeItem.name"/></div>
          </div>
          <div class="line">
            <div class="t1"><span>会员卡：</span></div>
            <div style="display: flex;align-items: center;justify-content: space-between;flex-grow: 1">
              <div>年卡</div>
              <div>套餐：正骨塑形套餐</div>
              <div> 已使用/总次数 ：1/10</div>
            </div>
          </div>
          <div class="line">
            <div class="t1"><span>执行人：</span></div>
            <div><el-input disabled/></div>
          </div>
          <div class="line">
            <div class="t1"><span>反馈意见：</span></div>
            <div><el-input disabled/></div>
          </div>
        </div>
        <div class="table-title"><span>选择执行项目</span></div>
        <div class="project-table">
          <el-table :data="actuation" class="table" header-cell-class-name="content-table-title">
            <el-table-column type="index" label="序号"/>
            <el-table-column prop="desc" label="项目名称"></el-table-column>
            <el-table-column prop="num" label="本次执行"></el-table-column>
            <el-table-column prop="date" label="执行时间"></el-table-column>
            <el-table-column prop="ratio" label="已执行/总数"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'executeDetails',
  data () {
    return {
      dialogVisible: false,
      executeItem: {},
      actuation: [
        { id: 1, desc: '有氧塑身', date: '2020/03/12', num: 1, ratio: '1/10' }
      ]
    }
  },
  methods: {
    show (item) {
      this.dialogVisible = true
      console.log(item)
      this.executeItem = item
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.execute-details-dialog {
  font-size: 14px;
  .title {
    border-bottom: 1px solid #e5e1e1;
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
  }
  .details-body {
    margin-top: -40px;
    .user-info {
      padding: 0 50px;
      .line{
        margin-top: 20px;
        display: flex;
        align-items: center;
        .t1{
          text-align: right;
          margin-right: 5px;
          width: 75px;
        }
      }
    }
    .table-title{
      font-size: 15px;
      color: rgba(34, 33, 33, 0.78);
      margin: 40px 0 0 50px;
    }
    .project-table{
      margin: 20px 30px 30px 70px;
      .table{
        box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.04);
      }
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
